<template>
  <div class="login-wrap">
    <el-form label-position="left" :model="loginParam" :rules="rules" ref="loginForm" label-width="0px" class="demo-loginParam login-container">
      <h3 class="title">用户登录</h3>
      <el-form-item prop="userName">
        <el-input type="text" v-model.trim="loginParam.userName" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model.trim="loginParam.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="code">
            <el-input type="text" v-model.trim="loginParam.code" auto-complete="off" placeholder="图形验证码">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="code-box">
          <img :src="codeImgUrl" alt="" class="codeimg" @click="getChptcha" />
        </el-col>
      </el-row>
      <el-checkbox class="remember" v-model="isAdmin">管理员登录</el-checkbox>
      <el-form-item style="width: 100%">
        <el-button type="primary" style="width: 100%" @click="login('loginForm')" :loading="logining">登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script type="text/ecmascript-6">
import { adminLoginApi, getUserInfoApi } from "@/api/admin";
import { loginApi, getChptchaApi } from "@/api/home";
import { mapMutations } from "vuex";
import Cookie from "js-cookie";
export default {
  name: "login",
  data() {
    return {
      //定义loading默认为false
      logining: false,
      // 是否为管理员登录
      isAdmin: false,
      loginParam: {
        //username和password默认为空
        userName: "",
        password: "",
        code: "",
      },
      rules: {
        userName: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
      },
      codeImgUrl: "",
    };
  },
  created() {
    this.getChptcha();
  },
  // 里面的函数只有调用才会执行
  methods: {
    ...mapMutations(["changeLogin", "setLocalUser"]),
    login(name) {
      this.$refs[name].validate((res) => {
        if (res) {
          if (this.isAdmin) {
            //管理员登录
            this.adminLogin();
          } else {
            //普通用户登录
            this.$message.error("非管理员无法登录");
          }
        } else {
          return false;
        }
      });
    },
    adminLogin() {
      this.logining = true;
      adminLoginApi(this.loginParam)
        .then((res) => {
          const result = res.data;
          if (result.status == 200) {
            let token = result.data.Authorization;
            Cookie.set("token", token, { expires: 1 });
            this.setUserinfo();
            this.$message.success("登录成功");
            this.$router.push("/admin/home");
          } else {
            this.$message.warning(result.msg);
          }
        })
        .catch((res) => {
          console.log(res);
          this.$message.error("登录超时");
        })
        .finally(() => {
          this.logining = false;
        });
    },
    //获取验证码
    getChptcha() {
      getChptchaApi().then((res) => {
        const result = res.data;
        if (result.status == 200) {
          this.codeImgUrl = "data:image/png;base64," + result.data.imageBase64;
        }
      });
    },
    //获取用户信息
    setUserinfo() {
      getUserInfoApi().then((res) => {
        const result = res.data;
        if (result.status == 200) {
          this.setLocalUser(result.data);
        }
      });
    },
  },
};
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url("~@/assets/img/bg.jpeg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}

.remember {
  margin: 0px 0px 35px 0px;
}

.code-box {
  text-align: right;
}

.codeimg {
  height: 40px;
}
</style>
